<template>
	<view class="content">
		<view class="padding">
			<!-- 顶部搜索栏 -->
			<view class="sousuobox flexleft margin-top">
				<view class="search margin_right2"></view>
				<input class="inputs" type="text" placeholder="请输入你要搜索的内容" v-model="keyword" @confirm="getGoodsList()">
			</view>
			<!-- 商品 -->
			<view class="shangpinbox">
				<view class="flexbetween margin_top nav">
					<view :class="current==0?'focustext':'nofocustext'" @click="selectabzh()">综合</view>
					<view class="flexleft">
						<view :class="current==1?'focustext ':'nofocustext'" @click="selectab()">销量</view>
						<view class="trbox margin_left1">
							<view :class="type==1?'shanghjt':'shanghuijt'"></view>
							<view :class="type==2?'xiahjt':'xiahuijt'"></view>
						</view>
					</view>
					<view class="flexleft">
						<view :class="current==2?'focustext':'nofocustext'" @click="selectabprice()">价格</view>
						<view class="trbox margin_left1">
							<view :class="type==3?'shanghjt':'shanghuijt'"></view>
							<view :class="type==4?'xiahjt':'xiahuijt'"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 空白页 -->
			<view class="zwtimg placeholderimg flexcenter" style="margin-top: 300rpx;" v-if="goodsList.total==0">
				<image src="@/static/image/bg-icons/placeholderimg.png" mode=""></image>
			</view>
			<!-- 商品列表/店铺详情列表 -->
			<view class="flexbetween flex_wrap">
				<view class="shangpbox margin_top border1" v-for="item in goodsList.data" :key="item.id"
					@click="xq(item.id)">
					<view class="shangptp">
						<image :src="item.image_text" mode=""></image>
					</view>
					<view class="padding15 ffffff baibox ">
						<view class="yihang text_a color_san">{{item.title}}</view>
						<view class="word_hh orange margin_top2">￥{{item.goodsprice.price}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="flexcenter margin_top" v-if="!goodsList.data.length">
				<image src="../static/image/placeholderimg.png" mode=""></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				current: 0,
				type: 0, // 1销量由高到底，2销量由低到高，3价格由高到底，4价格由低到高
				page: 1,
				limit: 12,
				keyword: "",
				sales_status: 0, //销量排序 0不排序 1降序 2升序
				price_status: 0, //价格排序 0不排序 1降序 2升序
				zh_status: 0, //综合排序 0不排序 1排序
				category_id: "", //分类id
				goodsList: {
					data: []
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.category_id = options.id
			}
			if(options.keyWords){
				this.keyword = options.keyWords
			}else{
				this.keyword = ""
			}
			this.getGoodsList()
		},
		methods: {
			getGoodsList(isPage, page) {
				let _this = this
				httpRequest.request('/api/goods/goodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					category_id: _this.category_id,
					keyword: _this.keyword,
					sales_status: _this.sales_status,
					price_status: _this.price_status,
					zh_status: _this.zh_status
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.goodsList;
						if (isPage == true) {
							_this.goodsList.data = dataList.data.concat(resList.data);
						} else {
							this.goodsList = res.data
							_this.goodsList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.goodsList;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getGoodsList(true, page);
			},
			xq(id) {
				uni.navigateTo({
					url: "/pages_index/shangpinxq?id=" + id
				})
			},
			// 切换筛选项
			selectabzh() {
				this.current = 0
				this.price_status=0
				this.sales_status=0
				this.type = 0
				this.getGoodsList()
			},
			selectab() { //销量
				this.current = 1
				this.price_status=0
				this.type = this.type == 0 ? 1 : this.type == 1 ? 2 : 1
				this.sales_status=this.type
				this.getGoodsList()
			},
			selectabprice() {
				this.current = 2
				this.sales_status=0
				this.type = this.type != 3 ? 3 : 4
				if(this.type==3){
					this.price_status=2
				}else if(this.type==4){
					this.price_status=1
				}
				this.getGoodsList()
			},
		}
	}
</script>
<style lang="scss" scoped>
	.orange {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF7510;
	}

	.shilitu {
		width: 86rpx;
		height: 86rpx;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.liji {
		padding: 0rpx 20rpx;
	}

	.duihuan {
		text-align: center;
		padding: 12rpx 0rpx;
		background-color: RGBA(255, 117, 16, 1);
		border-radius: 42rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.nav {
		padding: 0rpx 100rpx;
	}

	// 商品列表样式
	.shangpbox {
		width: 48%;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
	}

	.baibox {
		border-radius: 0 0 11rpx 11rpx;
	}

	.shangptp {
		width: 100%;
		border-radius: 11rpx 11rpx 0 0;
		height: 338rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}

	.xiahuijt {
		margin-top: 6rpx;
		width: 13rpx;
		height: 10rpx;
		background-image: url('/static/image/home/huixia.png');
		background-size: 100% 100%;
	}

	.shanghuijt {
		width: 13rpx;
		height: 10rpx;
		background-image: url('/static/image/home/xiabiao.png');
		background-size: 100% 100%;
	}

	.shanghjt {
		width: 13rpx;
		height: 10rpx;
		background-image: url('/static/image/home/orangeshang.png');
		background-size: 100% 100%;
	}

	.xiahjt {
		margin-top: 6rpx;
		width: 13rpx;
		height: 10rpx;
		background-image: url('/static/image/home/shangbiao.png');
		background-size: 100% 100%;
	}

	.nofocustext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.focustext {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.sousuobox {
		width: 100%;
		background: #F3F3F3;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		box-sizing: border-box;
	}
</style>